<template>
  <div>
    <div ref="main" style="height:800px;border: 1px solid;">

    </div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import {getCurrentInstance, onMounted, ref} from "vue";
import {useRouter} from "vue-router";

const {proxy} = getCurrentInstance()
const router = useRouter()
const heritageData = ref([])
const linkData = ref([])

// 计算距离函数
const GetDistance = ( lat1,  lng1,  lat2,  lng2) => {
  let radLat1 = lat1*Math.PI / 180.0;
  let radLat2 = lat2*Math.PI / 180.0;
  let a = radLat1 - radLat2;
  let  b = lng1*Math.PI / 180.0 - lng2*Math.PI / 180.0;
  let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) +
      Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
  s = s *6378.137 ;// EARTH_RADIUS;
  s = Math.round(s * 10000) / 10000;
  return s;
}

//查询附近非遗
const getHeritageDocList = () => {
  proxy.request.get('/api/kGraph', {
    params: {
      lat: 26,
      lon: 108
    }
  }).then(res => {
    if (res.code === '1') {
      //获取关系图中每个节点数据
      heritageData.value = res.data.map(heritage => {
        const tempHeritage = {}
        tempHeritage.id = heritage.id
        tempHeritage.name = heritage.name
        const arr = heritage.location.split(",")
        tempHeritage.x = Number(arr[0])
        tempHeritage.y = Number(arr[1])
        tempHeritage.colors = '#5572c8'
        return tempHeritage
      })
      heritageData.value.unshift({
        id:0,
        name:'我',
        colors:'orange',
        x:26,
        y:108,
      })
      //对线条进行处理
      linkData.value = heritageData.value.filter(h => h.id !== 0).map((heritage,index) => {
        const tempLink = {
          source:0,
          target:index + 1,
          symbolSize: [5, 20],
          label: {
            show: true,
            formatter: `${Math.floor(GetDistance(26,108,heritage.x,heritage.y))}Km`
          },
          lineStyle: {
            width: 3,
            curveness: 0.1
          }
        }
        return tempLink
      })
    }
  })
}
getHeritageDocList()

const timer = () => {
  let myChart = echarts.init(proxy.$refs.main);
  let option;

  option = {
    title: {
      text: 'Basic Graph'
    },
    tooltip: {},
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    series: [
      {
        type: 'graph',
        layout: 'none',
        symbolSize: 50,
        roam: true,
        label: {
          show: true
        },
        edgeSymbol: ['circle', 'arrow'],
        edgeSymbolSize: [4, 10],
        edgeLabel: {
          fontSize: 20
        },
        data: heritageData.value,
        links:linkData.value,
        itemStyle:{
          normal:{
            color: params => {
              return params.data.colors
            },
          }
        },
        lineStyle: {
          opacity: 0.9,
          width: 2,
          curveness: 0
        },

      }
    ]
  };

  option && myChart.setOption(option);
  //节点点击事件
  myChart.on('click', param => {
    if (param.dataType == 'node' && param.name !== '我') {
      router.push({
        name:'heritageDetail',
        params:{
          id:param.data.id
        }
      })
    }
  })
}


onMounted(() => {
  setTimeout(() => {
    timer()
  }, 1000)
})


</script>

<style lang="less" scoped>
</style>